<template>
  <div class="flex flex-col h-full overflow-hidden">
    <app-header/>

    <main>
      <div class="delete-confirm-container">
        <h2 class="page-title">删除用户确认</h2>

        <div class="confirm-content">
          <div class="warning-icon">
            <i class="fas fa-exclamation-triangle"></i>
          </div>
          
          <div class="user-info">
            <p class="warning-text">确定要删除以下用户吗？此操作无法撤销。</p>
            <div class="info-item">
              <span class="label">工号/用户名:</span>
              <span class="value">{{ userData.opid }}</span>
            </div>
            <div class="info-item">
              <span class="label">姓名:</span>
              <span class="value">{{ userData.name || '-' }}</span>
            </div>
          </div>

          <div class="button-group">
            <button type="button" class="hmi-button hmi-button-secondary" @click="goBack">
              <i class="fas fa-times"></i>取消
            </button>
            <button 
              type="button" 
              class="hmi-button hmi-button-danger" 
              @click="confirmDelete"
              :disabled="isDeleting"
            >
              <i :class="isDeleting ? 'fas fa-spinner fa-spin' : 'fas fa-trash'"></i>
              {{ isDeleting ? '删除中...' : '确认删除' }}
            </button>
          </div>
        </div>
      </div>
    </main>

    <div v-if="notification.show" class="notification"
         :class="{ 'notification-success': notification.type === 'success', 'notification-error': notification.type === 'error', 'show': notification.show }">
      <span>{{ notification.message }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 响应式数据
const userData = reactive({
  id: '',
  opid: '',
  name: '',
  role: ''
})

const isDeleting = ref(false)

// 通知状态
const notification = reactive({
  show: false,
  message: '',
  type: 'success'
})

// 显示通知
const showNotification = (message, type = 'success') => {
  notification.show = true
  notification.message = message
  notification.type = type
  
  setTimeout(() => {
    notification.show = false
  }, 3000)
}

// 加载用户数据
const loadUserData = () => {
  try {
    const userId = route.params.id
    const users = userStore.get('users') || []
    const user = users.find(u => u.opid === userId)
    
    if (!user) {
      showNotification('用户不存在', 'error')
      router.back()
      return
    }

    // 检查是否是当前登录用户
    const currentUser = sessionStorage.getItem('loggedInUser')
    if (user.opid === currentUser) {
      showNotification('无法删除当前登录用户', 'error')
      router.back()
      return
    }

    // 检查是否是最后一个管理员
    const adminUsers = users.filter(u => u.role === 'admin')
    if (adminUsers.length === 1 && adminUsers[0].opid === user.opid) {
      showNotification('无法删除最后一个管理员用户', 'error')
      router.back()
      return
    }

    userData.id = user.opid
    userData.opid = user.opid
    userData.name = user.name
    userData.role = user.role
  } catch (error) {
    logger.error(`加载用户数据失败: ${error.message}`)
    showNotification('加载用户数据失败', 'error')
    router.back()
  }
}

// 确认删除
const confirmDelete = async () => {
  try {
    isDeleting.value = true
    const users = userStore.get('users') || []
    const updatedUsers = users.filter(user => user.opid !== userData.id)
    
    await userStore.set('users', updatedUsers)
    logger.info(`成功删除用户: ${userData.opid}`)
    showNotification('用户删除成功')
    
    // 删除成功后返回列表页
    router.back()
  } catch (error) {
    logger.error(`删除用户失败: ${error.message}`)
    showNotification('删除用户失败', 'error')
  } finally {
    isDeleting.value = false
  }
}

// 返回列表页
const goBack = () => {
  router.back()
}

// 页面加载时初始化
onMounted(() => {
  loadUserData()
})
</script>

<style scoped>
main {
  flex-grow: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.delete-confirm-container {
  max-width: 500px;
  margin: 0 auto;
  background-color: var(--bg-secondary);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
}

.page-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

.confirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.warning-icon {
  font-size: 3rem;
  color: var(--status-yellow);
}

.user-info {
  width: 100%;
  text-align: center;
}

.warning-text {
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 1rem;
}

.info-item {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.label {
  color: var(--text-secondary);
  font-weight: 500;
}

.value {
  color: var(--text-primary);
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.hmi-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.hmi-button i {
  font-size: 0.875rem;
}

.hmi-button-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.hmi-button-secondary:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.hmi-button-danger {
  background-color: var(--status-red);
  color: white;
  border: 1px solid transparent;
}

.hmi-button-danger:hover {
  background-color: #dc2626;
}

.hmi-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.notification {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100;
}

.notification.show {
  opacity: 1;
  visibility: visible;
}

.notification-success {
  background-color: var(--status-green);
}

.notification-error {
  background-color: var(--status-red);
}
</style>
